@import './public.scss';

body {
  overflow-x: hidden;
  background-color: #f0f0f0;
}

// 1.隐藏topList
.tabBox {
  .topCats {
    &:hover .topList {
      display: block;
    }
  }

  .topList {
    display: none;
  }
}

//  2.商品分类
.classify {
  margin-bottom: 20px;

  .classify_top {
    display: flex;
    align-items: center;
    width: 100%;
    height: 58px;
    background-color: #fff;
    margin-bottom: 20px;

    .sortPrice {
      display: inline-block;
      height: 34px;
      padding: 6px 12px;
      font-size: 14px;
      line-height: 1.42857143;
      margin-left: 20px;
      color: #555;
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
      transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    }

    .sortXl {
      @extend .sortPrice;
    }
  }

  .goodSum {
    display: flex;
    flex-wrap: wrap;

    .goods {
      width: 262px;
      height: 380px;
      margin: 0 6px 14px;
      background-color: #fff;
      font-size: 12px;
      padding-top: 20px;
      transition: all 0.5s;

      &:hover {
        transform: scale(1.1);
      }

      img {
        vertical-align: middle;
        width: 262px;
        height: 262px;
      }


      .goods_desc {
        display: flex;
        flex-direction: column;
        align-items: center;

        p {
          margin-bottom: 10px;
        }

        .new {
          display: inline-block;
          height: 16px;
          line-height: 16px;
          background-color: #e31636;
          padding: 0 3px;
          margin-right: 4px;
          text-align: center;
          vertical-align: middle;
          color: #fff;
          font-size: 12px;
          border-radius: 2px;
        }

        .price {
          font-weight: 900;
          color: #e31636;
        }

        .screen {
          height: 16px;
          line-height: 16px;
          border-color: rgba(207, 10, 44, 0.4);
          padding: 0 3px;
          margin-right: 4px;
          text-align: center;
          color: rgb(207, 10, 44);
          font-size: 12px;
          border-radius: 2px;
          border: 1px solid #e31636;
        }

      }

    }
  }

  //翻页
  .page {
    height: 30px;
    transform: translateX(420px);

    span {
      display: inline-block;
      background-color: #fff;
      width: 58px;
      cursor: pointer;
      height: 30px;
      border: #e3e3e3 1px solid;
      text-align: center;
      line-height: 30px;
      vertical-align: middle;
      user-select: none;
    }

    a {
      display: inline-block;
      width: 30px;
      height: 30px;
      text-align: center;
      margin-right: -1px;
      line-height: 28px;
      border: #e3e3e3 1px solid;
      color: #333;
      vertical-align: middle;
    }
  }
}

.off {
  color: #ddd;
}

.active {
  background-color: #e31436;
  // border-color: #e31436;
  color: #fff;
}